<template>
    <div class="apiCacheContainer">
        <div class="searchContainer">
            <ServiceRegisterSearch />
        </div>
        <div class="insertContainer">
            <el-button type="primary" plain icon="PlusOutlined" @click="addService()">添 加</el-button>
            <el-button type="primary" icon="SecurityScanOutlined" @click="getSshKey()">获取SSH秘钥</el-button>
        </div>
        <div>
            <el-table
                :data="serviceApplicationDataList"
                style="width: 100%; margin-bottom: 20px; margin-top: 20px;"
                row-key="id"
                border
                :stripe="true"
                :show-overflow-tooltip="true"
                class="tableContainer"
                max-height="70vh"
            >
                <el-table-column prop="applicationName" label="微服务名称" />
                <el-table-column prop="gitPath" label="微服务GIT路径" />
                <el-table-column prop="pomPath" label="微服务POM路径" />
                <el-table-column prop="jarPath" label="微服务JAR包路径" />
                <el-table-column prop="jarName" label="微服务JAR包名称" />
                <el-table-column align="center">
                    <template #header>
                        <span>操 作</span>
                    </template>
                    <template #default="scope">
                        <el-button
                            size="small"
                            type="success"
                            @click="handleUpdate(scope.$index, scope.row)">修 改</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
                        <el-button type="primary" size="small" @click="handleCopy(scope.$index, scope.row)">复 制</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <ServiceAddOrUpdateDialog :serviceForm="serviceForm"/>
        </div>
        <div>
            <ServiceRegisterDeleteDialog :serviceForm="serviceForm"/>
        </div>
        <div>
            <el-dialog
                v-model="sshKeyDialogFlag"
                title="ssh秘钥"
                width="20%"
                align-center
                :show-close="false"
                :close-on-click-modal="false"
            >
                {{sshKeyInfo}}
                <template #footer>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="closeSshKeyDialog()">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script name="ServiceRegisterManage" setup lang="ts">
import ServiceRegisterSearch from '@/components/serviceManage/serviceRegisterManage/ServiceRegisterSearch.vue'
import ServiceAddOrUpdateDialog from '@/components/serviceManage/serviceRegisterManage/ServiceAddOrUpdateDialog.vue'
import ServiceRegisterDeleteDialog from "@/components/serviceManage/serviceRegisterManage/ServiceRegisterDeleteDialog.vue";
import {applicationInfoQuery, getCommonSshPublicKey} from "@/request/service";
import {createTag} from "@/utils/ywuCommon";
import {computed, ref} from "vue";
import {useServiceRegisterStore} from "@/stores/serviceManage/serviceRegister";
import {useRoute} from "vue-router";

let serviceForm = ref({
    id: '',
    applicationName: '',
    gitPath: '',
    pomPath: '',
    jarPath: '',
    jarName: ''
});
let sshKeyInfo = ref("");
let sshKeyDialogFlag = ref(false);

let serviceApplicationDataList = computed(() => {return useServiceRegisterStore().serviceApplicationDataList});
let serviceApplicationSearchData = computed(() => {return useServiceRegisterStore().serviceApplicationSearchData});

// 查詢应用列表
applicationInfoQuery(serviceApplicationSearchData.value).then(res => {
    if (res["code"] === '200') {
        useServiceRegisterStore().resetServiceApplicationDataList(res.data);
    }
})

// 创建标签
let route = useRoute();
createTag(route);

function addService() {
    serviceForm.value = {
        id: '',
        applicationName: '',
        gitPath: '',
        pomPath: '',
        jarPath: '',
        jarName: ''
    }
    useServiceRegisterStore().resetAddOrUpdateDialog(true);
}

function handleUpdate(index, row) {
    serviceForm.value = {
        id: row.id,
        applicationName: row.applicationName,
        gitPath: row.gitPath,
        pomPath: row.pomPath,
        jarPath: row.jarPath,
        jarName: row.jarName
    }
    useServiceRegisterStore().resetAddOrUpdateDialog(true);
}

function handleDelete(index, row) {
    serviceForm.value = {
        id: row.id,
        applicationName: row.applicationName,
        gitPath: row.gitPath,
        pomPath: row.pomPath,
        jarPath: row.jarPath,
        jarName: row.jarName
    }
    useServiceRegisterStore().resetDeleteServiceDialog(true);
}

function handleCopy(index, row) {
    serviceForm.value = {
        id: '',
        applicationName: row.applicationName,
        gitPath: row.gitPath,
        pomPath: row.pomPath,
        jarPath: row.jarPath,
        jarName: row.jarName
    }
    useServiceRegisterStore().resetAddOrUpdateDialog(true);
}

function getSshKey() {
    sshKeyInfo.value = "";
    sshKeyDialogFlag.value = true;
    getCommonSshPublicKey({}).then(res => {
        if (res["code"] === "200") {
            sshKeyInfo.value = res.data;
        }
    })
}

function closeSshKeyDialog() {
    sshKeyInfo.value = "";
    sshKeyDialogFlag.value = false;
}
</script>

<style scoped lang="less">
.apiCacheContainer {
    width: 98%;
    height: 100%;
    margin: 0.2%;
    .searchContainer {
        width: 100%;
        margin-top: 1%;
    }
    .tableContainer {
        margin-left: 1%;
    }
    .insertContainer {
        margin-left: 1%;
        margin-top: 0.7%;
    }
}
</style>